<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书列表展示</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <link rel="stylesheet" href="css/list.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script src="js/jq-paginator.js"></script>

</head>

<body>
<div class="bookContainer">
  <h2>图书列表展示</h2>
  <div class="navbar-justify-between">
    <div>
      <button class="btn btn-outline-info" type="button" onclick="location.href='book_add.html'">添加图书</button>
      <button class="btn btn-outline-info" type="button" onclick="batchDelete()">批量删除</button>
    </div>
  </div>

  <table>
    <thead>
    <tr>
      <td>选择</td>
      <td class="width100">图书ID</td>
      <td>书名</td>
      <td>作者</td>
      <td>数量</td>
      <td>定价</td>
      <td>出版社</td>
      <td>状态</td>
      <td class="width200">操作</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
      <td>1</td>
      <td>大秦帝国第一册</td>
      <td>我是作者</td>
      <td>23</td>
      <td>33.00</td>
      <td>北京出版社</td>
      <td>可借阅</td>
      <td>
        <div class="op">
          <a href="book_update.html?bookId=1">修改</a>
          <a href="javascript:void(0)" onclick="deleteBook(1)">删除</a>
        </div>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
      <td>2</td>
      <td>大秦帝国第二册</td>
      <td>我是作者</td>
      <td>23</td>
      <td>33.00</td>
      <td>北京出版社</td>
      <td>可借阅</td>
      <td>
        <div class="op">
          <a href="book_update.html?bookId=2">修改</a>
          <a href="javascript:void(0)" onclick="deleteBook(2)">删除</a>
        </div>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
      <td>3</td>
      <td>大秦帝国第三册</td>
      <td>我是作者</td>
      <td>23</td>
      <td>33.00</td>
      <td>北京出版社</td>
      <td>可借阅</td>
      <td>
        <div class="op">
          <a href="book_update.html?bookId=3">修改</a>
          <a href="javascript:void(0)" onclick="deleteBook(3)">删除</a>
        </div>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
      <td>4</td>
      <td>大秦帝国第四册</td>
      <td>我是作者</td>
      <td>23</td>
      <td>33.00</td>
      <td>北京出版社</td>
      <td>可借阅</td>
      <td>
        <div class="op">
          <a href="book_update.html?bookId=4">修改</a>
          <a href="javascript:void(0)" onclick="deleteBook(4)">删除</a>
        </div>
      </td>
    </tr>
    </tbody>
  </table>

  <div class="demo">
    <ul id="pageContainer" class="pagination justify-content-center"></ul>
  </div>
  <script>

            getBookList();
            function getBookList() {

            }

            //翻页信息
            $("#pageContainer").jqPaginator({
                totalCounts: 100, //总记录数
                pageSize: 10,    //每页的个数
                visiblePages: 5, //可视页数
                currentPage: 1,  //当前页码
                first: '<li class="page-item"><a class="page-link">首页</a></li>',
                prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
                next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
                last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
                page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',
                //页面初始化和页码点击时都会执行
                onPageChange: function (page, type) {
                    console.log("第"+page+"页, 类型:"+type);
                }
            });
            function deleteBook(id) {
                var isDelete = confirm("确认删除?");
                if (isDelete) {
                    //删除图书
                    alert("删除成功");
                }
            }
            function batchDelete() {
                var isDelete = confirm("确认批量删除?");
                if (isDelete) {
                    //获取复选框的id
                    var ids = [];
                    $("input:checkbox[name='selectBook']:checked").each(function () {
                        ids.push($(this).val());
                    });
                    console.log(ids);
                    alert("批量删除成功");
                }
            }

        </script>
</div>
</body>

</html>